<template>
    <div ref="myDiv" class="bar-echarts">

    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    mounted() {
        const myChart = echarts.init(this.$refs.myDiv)
        // let xAxisData = []
        // let data1 =
        // let data2 =
        // let data3 =

        var emphasisStyle = {
            itemStyle: {
                shadowBlur: 8,
                shadowColor: 'rgba(0,0,0,0.3)',
            },
        }
        myChart.setOption(
            {
                grid: {
                    //
                    left: '0%',
                    right: '20%',
                    bottom: '20%',
                    top: '5%',
                    containLabel: true, //gid区域是否包含坐标轴的刻度标签
                },
                tooltip: {
                    show: true,
                    formatter:
                        '{b0}<br />单选题:{c0}<br />多选题:200<br />简答题:150',
                },
                barWidth: 10,
                barCategoryGap: '10%',
                textStyle: {
                    //----图例内容样式
                    color: '#5ab1ef', //---所有图例的字体颜色
                },
                xAxis: {
                    axisLine: {
                        interval: false,
                        lineStyle: {
                            color: '#50d6d9',
                        },
                    },
                    splitLine: { show: false },
                    splitArea: { show: false },
                    data: [
                        '周一',
                        '周二',
                        '周三',
                        '周四',
                        '周五',
                        '周六',
                        '周日',
                    ],
                    axisLabel: {
                        show: true,
                        inside: false,
                        margin: 3,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                yAxis: {
                    splitArea: {
                        show: true,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#50d6d9',
                        },
                    },
                },
                color: ['#50d6d9', '#c8b6eb', '#5ab1ef'],

                series: [
                    {
                        name: '简答题',
                        type: 'bar',
                        stack: 'one',
                        emphasis: emphasisStyle,
                        data: [30, 52, 200, 334, 390, 330, 220],
                    },
                    {
                        name: '多选题',
                        type: 'bar',
                        stack: 'one',
                        emphasis: emphasisStyle,
                        data: [80, 52, 200, 334, 390, 330, 220],
                    },
                    {
                        name: '单选题',
                        type: 'bar',
                        stack: 'one',
                        emphasis: emphasisStyle,
                        data: [79, 52, 200, 334, 390, 330, 220],
                    },
                ],
            },
            true
        )
        myChart.resize()
        window.addEventListener('resize', () => {
            //监听浏览器大小去改变图表尺寸
            myChart.resize()
        })
    },
}
</script>

<style>
.bar-echarts {
    width: 18.125rem;
    height: 14.0625rem;
}
</style>